<template>
    <div id="addNewClass">
        <table class="table table-bordered">
            <tbody>
                <tr >
                    <td>城市<span class="required">*</span></td>
                    <td style="text-align:left">
                        <el-select filterable v-model="classInfo['city.id']" @click.native="loadCityWithType('city')">
                            <el-option
                            v-for="(item,key) in cityList" 
                            :key = key
                            :label="item.cityName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </td>
                    <td>校园<span class="required">*</span></td>
                    <td style="text-align:left">
                        <el-select filterable v-model="classInfo['campus.id']" @click.native="loadAllCampusByCityId(classInfo['city.id'])">
                            <el-option
                            v-for="(item,key) in campusList" 
                            :key = key
                            :label="item.campusName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>班级名<span class="required">*</span></td>
                    <td>
                        <!-- <el-input v-model="classInfo.className" placeholder="班级名称"></el-input> -->
                        <input name="班级名" v-model="classInfo.className" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('班级名') }" type="text" placeholder="班级名">
                        <i v-show="errors.has('班级名')" class="fa fa-warning"></i>
                        <span v-show="errors.has('班级名')" class="help is-danger">{{ errors.first('班级名') }}</span>
                    </td>
                    <td>辅导时间<span class="required">*</span></td>
                    <td style="text-align:left">
                        <el-date-picker
                            v-model="classInfo.assistTime"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </td>
                </tr>
                <tr>
                    <td>预科时间 <span class="required">*</span></td>
                    <td style="text-align:left">
                        <el-date-picker
                            v-model="classInfo.prepareTime"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions1">
                        </el-date-picker>
                    </td>
                    <td>开班时间<span class="required">*</span></td>
                    <td style="text-align:left">
                        <el-date-picker
                            v-model="classInfo.openTime"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions2">
                        </el-date-picker>
                    </td>
                </tr>
                <tr>
                    <td>计划人数<span class="required">*</span></td>
                    <td>
                        <!-- <el-input v-model="classInfo.planCount"></el-input> -->
                        <input name="计划人数" v-model="classInfo.planCount" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('计划人数') }" type="text" placeholder="计划人数">
                        <i v-show="errors.has('计划人数')" class="fa fa-warning"></i>
                        <span v-show="errors.has('计划人数')" class="help is-danger">{{ errors.first('计划人数') }}</span>
                    </td>
                    <td>实际人数<span class="required">*</span></td>
                    <td>

                        <input name="实际人数" v-model="classInfo.realCount" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('实际人数') }" type="text" placeholder="实际人数">
                        <i v-show="errors.has('实际人数')" class="fa fa-warning"></i>
                        <span v-show="errors.has('实际人数')" class="help is-danger">{{ errors.first('实际人数') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>班主任<span class="required">*</span></td>
                    <td>
                        <el-input v-model="classInfo.headTeacher"></el-input>
                    </td>
                    <td>任课老师<span class="required">*</span></td>
                    <td>
                        <el-input v-model="classInfo.courseTeacher"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>课程<span class="required">*</span></td>
                    <td>
                        <el-input v-model="classInfo.subject"></el-input>
                    </td>
                    <td>详情描述<span class="required">*</span></td>
                    <td>
                        <el-input v-model="classInfo.description"></el-input>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" style="text-align:center">
                        <el-button type="danger" @click="cancel">取消</el-button>
                        <el-button type="primary" @click="submit">提交</el-button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>
<script>
import cityMixin from '@/Mixins/cityCampusMixin'
export default {
    mixins: [cityMixin],
    data(){
        return {
            classInfo: {
                // 'city.id': '',
                // 'campus.id': '',
                // className: '',
                // assistTime: '',
                // prepareTime: '',
                // openTime: '',
                // planCount: '',
                // realCount: '',
                // headTeacher: '',
                // courseTeacher: '',
                // subject: '',
                // description: '',
                token: this.$token,
                
            },
            cityList: [],
            campus: [],
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.classInfo.assistTime
                }
            },
            pickerOptions2: {
                disabledDate: (time) => {
                    return time.getTime() < this.classInfo.prepareTime
                }
            }
        }
    },
    methods: {
        //加载城市列表 /backstage/city/findByPage
        loadData(type,data){
            var url = window.baseURL+`/backstage/${type}/findByPage?token=${this.$token}`;
             this.$http.get(url)
            .then((response)=>{
                this[data] = response.data.data.list.results;
            })
            .catch((error)=>{
            })
        },
        submit(){
            // /backstage/classManage/insert
            this.formatDate("assistTime");
            this.formatDate("prepareTime");
            this.formatDate("openTime");
            var checkDataArr = ["city.id","campus.id","className","assistTime","prepareTime",
                                "openTime","planCount","realCount","headTeacher","courseTeacher","subject","description"]
            var goon = this.checkData(checkDataArr,this.classInfo);
            if(!goon){
                return;
            }
            var url = window.baseURL + "/backstage/classManage/insert";
            this.$http.post(url,this.$qs.stringify(this.classInfo))
            .then((response)=>{
                this.$router.go(-1);
            })
            .catch((error)=>{
            })
        },
        cancel(){
            this.$router.go(-1)
        },
        formatDate(data,date){
            var date = new Date(this.classInfo[data]);
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();
            this.classInfo[data] = year+"-"+month+"-"+day;
        }
    }
}
</script>

<style lang="scss" scoped>
    #addNewClass {
        width: 100%;
        height: 100%;
        padding: 40px;
        .table {
            tbody {
                tr {
                    td {
                        vertical-align: middle
                       
                    }
                }
            }
        }
        .required {
            color: red;
        }
    }
</style>

